<!--
 * @Author: guo wei
 * @LastEditors: [guo wei]
 * @LastEditTime: 2024-01-09 19:39:57
 * @Description: 
-->
<template>
  <div class="form-wrap">
    <el-button type="primary" @click="addType">新增分类</el-button>
    <el-table
      :data="tableData"
      style="width: 800px; margin-bottom: 20px; margin-top: 20px"
      row-key="materialCategoryInfoId"
      border
    >
      <el-table-column prop="materialCategoryName" label="类别" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleAdd(scope.$index, scope.row)"
            >新增</el-button
          >
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <!-- <el-table-column prop="secondType" label="二级分类" />
      <el-table-column prop="thirdType" label="三级分类" /> -->
    </el-table>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-model="dialogVisible"
      :title="dialogTitle"
      width="30%"
    >
      <div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmCreateType">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";
import {
  allMaterialCategoryInfo,
  addMaterialCategoryInfo,
  modifyMaterialCategoryInfo,
  deleteMaterialCategoryInfo,
} from "@/api/material.js";
import FormTag from "@/components/EditTag/form-tag.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const form = reactive({});
const dialogVisible = ref(false);
const ruleFormRef = ref();
const currentRowId = ref({});
const ruleForm = reactive({
  name: "",
});
const rules = reactive({
  name: [
    { required: true, message: "请输入分类名称", trigger: "blur" },
    { min: 1, max: 10, message: "字符长度在1-10个字符", trigger: "blur" },
  ],
});
const getListData = async () => {
  const params = { count: true, pageId: 1, pageSize: 20 };
  try {
    const res = await allMaterialCategoryInfo();
    // const res = await buildingTypeInfos(params);
    if (res.code == 200) {
      tableData.value = res.result || [];
    }
  } catch (error) {}
};
getListData();
const handleDelete = (index, row) => {
  ElMessageBox.confirm("确认删除吗?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await deleteMaterialCategoryInfo({
        materialCategoryInfoId: row.materialCategoryInfoId,
        recordVersion: row.recordVersion,
      });
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        getListData();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
const confirmCreateType = async () => {
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      if (dialogType.value == "add") {
        const params = {
          ...currentRowId.value,
          parentId: currentRowId.value.materialCategoryInfoId,
          materialCategoryName: ruleForm.name,
        };
        if (currentRowId.value.materialCategoryInfoId == -1) {
          params.dataLevel = -1;
        }
        delete params.children;
        const res = await addMaterialCategoryInfo(params);
        if (res.code == 200) {
          getListData();
          dialogVisible.value = false;
        }
      } else {
        const params = {
          ...currentRowId.value,
          materialCategoryName: ruleForm.name,
        };
        delete params.children;
        const res = await modifyMaterialCategoryInfo(params);
        if (res.code == 200) {
          getListData();
          dialogVisible.value = false;
        }
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
const dialogTitle = ref("添加分类");
const dialogType = ref("add");
const handleEdit = (index, row) => {
  console.log(index, row);
  dialogVisible.value = true;
  dialogTitle.value = "编辑分类";
  dialogType.value = "edit";
  ruleForm.name = row.materialCategoryName;
  currentRowId.value = row;
};
const handleAdd = (index, row) => {
  dialogVisible.value = true;
  dialogTitle.value = "添加分类";
  dialogType.value = "add";
  ruleForm.name = "";
  currentRowId.value = row;
};
const addType = () => {
  dialogVisible.value = true;
  dialogTitle.value = "添加分类";
  dialogType.value = "add";
  ruleForm.name = "";
  currentRowId.value = { materialCategoryInfoId: -1 };
};
const tableData = ref([]);
</script>
<style lang="scss" scoped>
.border-form {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-top: 20px;
  :deep .el-form-item {
    border-bottom: 1px solid #e4e7ed;
    margin-bottom: 0px;
    &:last-child {
      border-bottom: none;
    }
    .el-form-item__label {
      border-right: 1px solid #e4e7ed;
      padding: 20px;
      display: flex;
      height: auto;
      align-items: center;
    }
    .el-form-item__content {
      padding: 20px;
      padding-bottom: 5px;
      > * {
        padding: 0 20px;
      }
      .el-form-item__error {
        top: 42px;
      }
      .el-tag {
        margin-left: 15px;
        margin-bottom: 15px;
        vertical-align: middle;
      }
      .button-new-tag {
        margin-left: 15px;
        margin-bottom: 15px;
      }
      .el-input {
        width: auto;
        display: inline-block;
        margin-left: 15px;
        margin-bottom: 15px;
      }
    }
    .el-input__inner {
      margin-bottom: 0px;
    }
  }
}
.form-wrap {
  padding: 20px;
}
</style>
